<template>
	<view class="container">
		<view class="header">
			<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
				back-icon-size="35" :background="{ background: '#fff' }" title="事件列表" title-color="#000">
			</u-navbar>
			<view>
				<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="handleChange"></u-tabs>
			</view>
		</view>
		<view class="blank"></view>
		<view class="event-list-cell" v-for="item in 20" @click="handleDetail(item)">
			<view class="source">网格上报</view>
			<view class="type">环境卫生 / 积存垃圾渣土（建筑装修垃圾</view>
			<view class="content">垃圾未入容器，胶州西路与惠州路交叉口东约50米路北大约50..</view>
			<view class="time">
				<view>2024061899885216455</view>
				<view>上报时间：2024-08-24 12:36</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},

				status: 'loadmore',
				tabList: [{
					name: '全部'
				}, {
					name: '待转派',
				}, {
					name: '待接单',
				}, {
					name: '处理中',
				}, {
					name: '待核实',
				}, {
					name: '待复核',
				}, {
					name: '已办结',
				}],
				current: 0
			};
		},
		onReachBottom() {
			// if(this.page >= 3) return ;
			
			this.status = 'loading';
			// this.page = ++ this.page;
			setTimeout(() => {
				// this.list += 10;
				this.status = 'nomore';
				// else this.status = 'loading';
			}, 2000)
		},
		methods: {
			handleChange(index) {
				this.current = index;
			},
			handleDetail(data){
				uni.navigateTo({
					url:"/pages/event/detail"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {

		// background-color: lightgray;
		.header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 5;
			background-color: #fff;
		}
		.blank{
			height: 250rpx;
		}
	}

	.event-list {
		flex: 1;
		overflow-y: auto;
	}

	.event-list-cell {
		border-radius: 8rpx;
		background-color: #fff;
		margin: 16rpx;
		padding: 16rpx;

		.time {
			display: flex;
		}
	}
</style>